<template>
  <div>
	
	
	
	<el-card  :bordered="false" shadow="never" class="ivu-mt" :body-style="{padding:0}">
	  <div class="padding-add" >
	    <el-form
		
	        ref="groupFrom"
	        :model="groupFrom"
	        :label-width="labelWidth"
	        :label-position="labelPosition"
	        inline
	        @submit.native.prevent
	    >
	      <el-form-item  label="卡密状态:" label-for="status1">
			  <!-- @change="userSearchs" -->
	        <el-select
	            v-model="groupFrom.status"
	            placeholder="请选择"
	            clearable
	            element-id="status1"
	            
	            class="form_content_width"
	        >
	          <el-option value="1" label="正常"></el-option>
	          <el-option value="2" label="失效"></el-option>
	          <el-option value="3" label="审核中"></el-option>
			  <el-option value="4" label="已激活"></el-option>
	        </el-select>
	      </el-form-item>
	      <el-form-item label="代理ID:" label-for="room_id" v-if="roles == '777'">
	        <el-input
	            clearable
	            v-model="groupFrom.room_id"
	            placeholder="请输入代理ID"
	            class="form_content_width"
	        />
	      </el-form-item>
		  
		  <el-form-item label="激活用户ID:" label-for="uid" style="width: 380px;">
		    <el-input
		        clearable
		        v-model="groupFrom.uid"
		        placeholder="请输入激活用户ID"
		        class="form_content_width"
		    />
		  </el-form-item>
		  
		  <el-form-item label="卡密号:" label-for="carmine_text">
		    <el-input
		        clearable
		        v-model="groupFrom.carmine_text"
		        placeholder="请输入卡密号"
		        class="form_content_width"
		    />
		  </el-form-item>
		  
	      <el-form-item>
	        <el-button type="primary" v-db-click @click="userSearchs">查询</el-button>
	      </el-form-item>
	    </el-form>
	  </div>
	</el-card>
	
	
	
	<!-- <div style="background-color: #fff;margin-top: 10px;width: 30%;margin: 0 auto;margin-top: 20px;">
		<div style="width: 100%;text-align: center;padding: 20px 0;">
			<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.all_number}}</div>
			<div>所有课程</div>
		</div>
	</div> -->
	
	<div style="background-color: #fff;margin-top: 10px;">
		<div style="display: flex;padding: 20px 0;width: 100%;">
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.all_number}}</div>
				<div>所有课程数量</div>
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.zhu_all_number}}</div>
				<div>主课卡密数量</div>
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.zhu_notused_number}}</div>
				<div>主课未使用的卡密数量</div>
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.zhu_examine_number}}</div>
				<div>主课审核中的卡密数量</div>
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.zhu_use_number}}</div>
				<div>主课已使用的卡密数量</div>
			</div>
		</div>
	</div>
	
	
	<div style="background-color: #fff;margin-top: 10px;">
		<div style="display: flex;padding: 20px 0;width: 100%;">
			<div style="width: 20%;text-align: center;">
				
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.fu_all_number}}</div>
				<div>副课卡密数量</div>
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.fu_notused_number}}</div>
				<div>副课未使用的卡密数量</div>
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.fu_examine_number}}</div>
				<div>副课审核中的卡密数量</div>
			</div>
			<div style="width: 20%;text-align: center;">
				<div style="font-size: 30px;color: red;font-weight: 700;">{{statistics.fu_use_number}}</div>
				<div>副课已使用的卡密数量</div>
			</div>
		</div>
	</div>
	
	 <el-button v-if="roles != '1'" @click="alldelete" type="danger" style="margin-top: 20px;">批量删除</el-button> 
	  
    <el-card :bordered="false" shadow="never" class="ivu-mt" style="margin-top: 10px;">
		
		
		
      <el-row>
        <!-- <el-col v-bind="grid">
          <el-button v-auth="['admin-user-group']" type="primary"  @click="add">添加分组</el-button>
        </el-col> -->
      </el-row>
      <el-table
        :data="groupLists"
        ref="table"
        class="mt14"
        v-loading="loading"
        highlight-current-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
		@sort-change="sortChanged"
		@select="handleSelectRow"
		@select-all="handleSelectAll"
      >
	  <el-table-column type="selection" :selectable="isSel" width="55"> </el-table-column>
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
		
		<el-table-column label="所属代理" width="200">
		  <template slot-scope="scope">
		    <span>{{ scope.row.room_info }}</span>
		  </template>
		</el-table-column>
		<el-table-column label="卡密号" width="200">
		  <template slot-scope="scope">
		    <span>{{ scope.row.carmine_text }}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="卡密类型" width="100">
		  <template slot-scope="scope">
		    <span>{{ scope.row.carmine_type }}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="卡密状态" width="100">
		  <template slot-scope="scope">
		    <span>{{ scope.row.status_text }}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="卡密类型" width="100">
		  <template slot-scope="scope">
		    <span v-if="scope.row.type_two == 1">付费卡密</span>
		    <span v-if="scope.row.type_two == 2">赠送卡密</span>
		    <span v-if="scope.row.type_two == 3">门票兑换卡密</span>
		    <span v-if="scope.row.type_two == 4">其他卡密</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="备注" width="100">
		  <template slot-scope="scope">
		    <span>{{ scope.row.mask }}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="添加时间" width="150">
		  <template slot-scope="scope">
		    <span>{{ scope.row.create_time }}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="激活用户" width="180">
		  <template slot-scope="scope">
		    <span>{{ scope.row.user_text }}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="激活时间" width="150">
		  <template slot-scope="scope">
		    <span>{{ scope.row.use_time }}</span>
		  </template>
		</el-table-column>
        
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <!-- <a v-db-click @click="edit(scope.row)">修改</a>
            <el-divider direction="vertical"></el-divider> -->
            <a  v-if="roles == '777' || roles == '10'" v-db-click @click="del(scope.row, '删除卡密', scope.$index)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="groupFrom.page"
          :limit.sync="groupFrom.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
	
	
	<!-- 添加科目卡密 -->
	<div>
		
		<el-dialog
		  title="编辑卡密"
		  :visible.sync="dialogVisible"
		  width="50%"
		  :showClose="false"
		  :before-close="handleClose">
			
		
			
			<div style="display: flex;margin-top: 20px;">
				<div style="font-size: 15px;width: 20%;margin-top: 5px;">卡密状态</div>
				<div style="width: 80%;margin-top: 8px;">
					<el-radio-group v-model="status">
					    <el-radio :label="1">正常</el-radio>
					    <el-radio :label="2">失效</el-radio>
					    <el-radio :label="3">已激活</el-radio>
					  </el-radio-group>
				</div>
			</div>
			
			<!-- <div style="display: flex;margin-top: 20px;">
				<div style="font-size: 15px;width: 20%;margin-top: 5px;">激活的科目</div>
				<div style="width: 80%;margin-top: 8px;">
					<el-checkbox-group v-model="subject_list">
					    <el-checkbox :label="item.cate_name" v-for="item in course_cate_list"></el-checkbox>
					</el-checkbox-group>
				</div>
			</div>
			
			<div style="display: flex;margin-top: 20px;">
				<div style="font-size: 15px;width: 20%;margin-top: 5px;">赠送的科目</div>
				<div style="width: 80%;margin-top: 8px;">
					<el-checkbox-group v-model="gift_subject_list">
					    <el-checkbox :label="item.cate_name" v-for="item in course_cate_list"></el-checkbox>
					</el-checkbox-group>
				</div>
			</div> -->
			
			<!-- <div style="display: flex;margin-top: 20px;">
				<div style="font-size: 15px;width: 20%;margin-top: 5px;">激活后到期时间</div>
				<div style="width: 80%;display: flex;">
					<el-input-number v-model="become_time"  :min="1" :max="1000000" label="激活后到期时间" style="width: 200px;"></el-input-number>
					<div style="margin-top: 6px;margin-left: 10px;">天</div>
				</div>
			</div> -->
	
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="createCarmine">确 定</el-button>
		  </span>
		</el-dialog>
		
	</div>
	
	
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { userGroupApi, groupAddApi,getAllSubjectApi,editChgenerateCarmine,alldeletecarmine} from '@/api/user';

export default {
  name: 'user_group',
  data() {
    return {
	  
	  check_ids:[],  //选中的ids	  
		
	  statistics:{},  //统计
	  now_info:{},
	  
	  
	  course_cate_list:[],
	  num: 1,
	  dialogVisible:false,
	  
	  roles:'',
	  
	  carmine_id:0,  //卡密id
	  status:0,  //卡密状态
	  subject_list: [],  //选择科目列表
	  gift_subject_list: [],  //赠送的科目列表
	  become_time:1,  //激活后到期时间  天
	  
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,

      groupFrom: {
        page: 1,
        limit: 50,
		status:'',
		room_id:'',
		uid:'',
		carmine_text:'',
      },
      groupLists: [],
      total: 0,
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '80px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left';
    },
  },
  created() {
    this.getList();
	this.getAllSubjectApi(); //获取所有科目列表
  },
  methods: {
	  
	  //批量删除
	  alldelete(){
		 if(this.check_ids.length == 0){
			 this.$message.error('请选择要删除的内容');
			 return false;
		 } 
		var that = this
		this.$confirm('确定要将卡密删除吗?', '提示', {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消',
		  type: 'warning'
		}).then(() => {
			
			alldeletecarmine({
				ids:this.check_ids
			})
			.then((res) => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
						this.check_ids = [];
				this.getList()
			})
			.catch((res) => {
			  this.$message.error(res.msg);
			});
			
		  
		}).catch(() => {
				 
		});
		

		 
		 
	  },
	  
	  handleSelectRow(e){
		 console.log('水水水水水水水水水水水水水水'); 
		 console.log(e); 
		 console.log('水水水水水水水水水水水水水水'); 
		var idarr = [];
		for(var i=0;i<e.length;i++){
			idarr.push(e[i]['id'])
		}
		this.check_ids = idarr
		console.log(this.check_ids);	
	  },
	  
	  handleSelectAll(e){
		  console.log('火火火火火火火火火火火火火火火火');
		  console.log(e);
		  console.log('火火火火火火火火火火火火火火火火');
		  var idarr = [];
		  for(var i=0;i<e.length;i++){
		  	idarr.push(e[i]['id'])
		  }
		  this.check_ids = idarr
		  console.log(this.check_ids);	
	  },
	  
	  
	  //提交编辑
	  createCarmine(){
	  	if(this.subject_list.length == 0){
	  		this.$message.error('请选择所属科目');
	  		return false;
	  	}
	  
	  	var that = this
	  	editChgenerateCarmine({
	  		subject_list:that.subject_list,
	  		gift_subject_list:that.gift_subject_list,
	  		become_time:that.become_time,
	  		carmine_id:that.carmine_id,
	  		status:that.status,
	  	})
	  	.then((res) => {
	  		this.dialogVisible = false;
	  		this.$message({
	  			type: 'success',
	  			message: '编辑成功!'
	  		});
	  		this.getList()
	  	})
	  	.catch((res) => {
	  	  this.$message.error(res.msg);
	  	});
	  	
	  },  
	  
	  
	  //获取所有科目
	  getAllSubjectApi(){
		var that = this
		getAllSubjectApi({})
		.then((res) => {
			that.course_cate_list = res.data.list
			
		})
		.catch((res) => {
		  this.$message.error(res.msg);
		});
	  },
	
	// 表格搜索
	userSearchs() {
	  this.groupFrom.page = 1;
	  this.getList();
	},  
	  
	
	handleClose(done) {
		this.$confirm('确认关闭？')
		  .then(_ => {
		done();
		})
		.catch(_ => {});
	},  
	  
	  
    // 添加
    add() {
      // this.$modalForm(groupAddApi(0))
      //   .then(() => this.getList())
      //   .catch(() => {
      //     console.log('error');
      //   });
	  console.log('点击添加');
	  this.dialogVisible = !this.dialogVisible
	  
	  
    },
    // 分组列表
    getList() {
      this.loading = true;
      userGroupApi(this.groupFrom)
        .then(async (res) => {
          let data = res.data;
          this.groupLists = data.list;
          this.statistics = data.statistics;
          this.total = data.count;
		  
		  this.roles = res.data.roles
	
		  
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    // 修改
    edit(row) {
      // this.$modalForm(groupAddApi(id)).then(() => this.getList());
	  
	  console.log('888888888888888888888888');
	  console.log(row);
	  console.log('888888888888888888888888');
	  this.carmine_id = row.id
	  this.become_time = row.become_time
	  this.status = row.status
	  this.subject_list = row.one_arr
	  this.gift_subject_list = row.two_arr
	  this.dialogVisible = true;
	  this.now_info = row
    },
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `user/user_group/del/${row.id}`,
        method: 'DELETE',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$message.success(res.msg);
          this.groupLists.splice(num, 1);
          this.getList();
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
  },
};
</script>

<style scoped lang="stylus"></style>
